<template lang="pug">
.main
  .banner
    el-carousel(:interval="3000" trigger="click" height="680px")
      el-carousel-item(v-for="(i,n) in imgUrl" :key="n")
        .img(:style="{backgroundImage: `url(${ossBaseUrl + i})`}")
  .sectionTop
    .sectionTitle 
      span 云税库
    .content
        .iconItem
          span
            img(:src="tax1")
            .name
              p 税收法规库
              p 最全面、
              p 最规范的法规资料库
            .btn(@click="openWeb('http://192.168.1.71/academy/#/advance')") 点击进入
        .iconItem
          span
            img(:src="tax2")
            .name
              p 税法多维查询
              p 知识点多维度
              p 立体化精准查找
            .btn(@click="openWeb('http://192.168.1.71/academy/#/lawquery')") 点击进入
        .iconItem
          span
            img(:src="tax3")
            .name
              p 政策解读
              p 法规文件
              p 精准解读
            .btn(@click="openWeb('http://192.168.1.71/academy/#/policy')") 点击进入
        .iconItem
          span
            img(:src="tax4")
            .name
              p 热点专题
              p 税务热点
              p 专项解决
            .btn(@click="openWeb('http://192.168.1.71/academy/#/hottopic')") 点击进入
  .sectionMiddle
    .contentTop
      .sectionTitle
        span 税务答疑
      .core
        .item
          img(:src="img1")
          p 全面
          p 税种全覆盖
          p 地域全铺开
          p 行业全涉及
        .item
          img(:src="img2")
          p 高效
          p 智能问答，专家解答，热点问答
          p 三位一体第一时间
          p 为您排忧解难
        .item
          img(:src="img3")
          p 权威
          p 保证每一个答案的准确性
          p 是我们唯一不敢亵渎
          p 的使命
        .btn(@click="openWeb('http://192.168.1.71/tax/#/reply')") 点击进入
      
    .contentBottom
      .sectionTitle
        span 云税服
        .wave1(:style="{backgroundImage:`url(${svg2})`}")
        .wave2(:style="{backgroundImage:`url(${svg1})`}")
      .lawContent
        .lists
          img(:src="img8")
          p 纳税筹划
          p 税务筹划
          p 合理节税
          .btn(@click="openWeb('http://192.168.1.71/tax/#/chouhua')") 开始筹划
        .lists
          img(:src="img9")
          p 专项委托
          p 一键委托
          p 全程无忧
          .btn(@click="openWeb('http://192.168.1.71/tax/#/weituo')") 开始委托
        .lists
          img(:src="img10")
          p 专题定制
          p 热点专题
          p 专项定制
          .btn(@click="openWeb('http://192.168.1.71/tax/#/dingzhi')") 开始定制
        .lists
          img(:src="img11")
          p 实时信息传递
          p 新闻资讯
          p 实时掌握
          .btn(@click="openWeb('http://192.168.1.71/tax/#/chuandi')") 点击进入
      
      .sectionContenr
      .viceBanner(:style="{backgroundImage: `url(${ossBaseUrl + 'index/banner-2.png'})`}")
        .sectionTitle
          span 花瓣儿软件
        .sectionContenr
          .iconItem
            span
              i.iconfont.icon-geren
              .name
                p 个人所得税
                p 智能计算分析系统
          .iconItem
            span
              i.iconfont.icon-waizongfuwu_woyaojinkou
              .name
                p 进口关税
                p 智能计算分析系统
          .iconItem
            span
              i.iconfont.icon-gerensuodeshuidaikoudaijiaoshenbao
              .name
                p 土地增值税
                p 智能计算分析系统
          .iconItem
            span
              i.iconfont.icon-waizongfuwu_woyaochukou
              .name
                p 出口退税
                p 智能计算分析系统
          .iconItem
            span
              i.iconfont.icon-qiye
              .name
                p 企业所得税
                p 智能计算分析系统
          .iconItem
            span
              i.iconfont.icon-chilun
              .name
                p 企业通用税务评估
                p 与风险控制系统
          .iconItem
            span
              i.iconfont.icon-fangdichan
              .name
                p 房地产企业税务评估
                p 与风险控制系统
          .iconItem
            span 
              i.iconfont.icon-xiaogongju1
              .name
                p 税务小工具
                p 智能计算分析系统
      .cooperation
        .sectionTitle
          span 合作伙伴
        .cooperationImg
          img(:src="hz1")
          img(:src="hz2")
          img(:src="hz3")
          img(:src="hz4")
          img(:src="hz5")
      .swiperCardContent
        el-carousel(:interval="4000" type="card" height="154px")
          el-carousel-item
            img(:src="img5" width="100%")
          el-carousel-item
            img(:src="img6" width="100%")
          el-carousel-item
            img(:src="img7" width="100%")
      .new
        .sectionTitle
          span 新闻动态
        .newContent
          .list-1(:style="{backgroundImage:`url(${news})`}")
            .tab(@mouseenter="index=0" :class="index===0?'hover':null" @click="$router.push('/gsdt')") 公司动态
            .tab(@mouseenter="index=1" :class="index===1?'hover':null" @click="$router.push('/cjyw')") 财经要闻
            .tab(@mouseenter="index=2" :class="index===2?'hover':null" @click="$router.push('/swyw')") 税务要闻
            .tab(@mouseenter="index=3" :class="index===3?'hover':null" @click="$router.push('/dfzx')") 地方资讯
          .list-2(v-show="index===0")
            .newsTitle
              span 公司动态 NEW
              font(@click="openWeb('/gsdt')") 查看更多
            .newsContent(v-for="(i,n) in newsData" :key="n" @click="openWeb('/index/'+i.id)")
              p
                span •
                | {{i.title}}
              p {{i.createTime}}
          .list-2(v-show="index===1")
            .newsTitle
              span 财经要闻 NEW
              font(@click="openWeb('/cjyw')") 查看更多
            .newsContent(v-for="(i,n) in newsData2" :key="n" @click="openWeb('/index/'+i.id)")
              p
                span •
                | {{i.title}}
              p {{i.createTime}}
          .list-2(v-show="index===2")
            .newsTitle
              span 税务要闻 NEW
              font(@click="openWeb('/swyw')") 查看更多
            .newsContent(v-for="(i,n) in newsData3" :key="n" @click="openWeb('/enterprise/index/'+i.id)")
              p
                span •
                | {{i.title}}
              p {{i.createTime}}
          .list-2(v-show="index===3")
            .newsTitle
              span 地方资讯 NEW
              font(@click="openWeb('/dfzx')") 查看更多
            .newsContent(v-for="(i,n) in newsData4" :key="n" @click="openWeb('/index/'+i.id)")
              p
                span •
                | {{i.title}}
              p {{i.createTime || 未知时间}}
          .list-3(:style="{backgroundImage:`url(${guanggao})`}")

</template>

<script>
export default {
  components: {},
  data() {
    return {
      index: 0,
      ossBaseUrl:'http://huaban-web.oss-cn-beijing.aliyuncs.com/huaban-enterprise/',
      banner: require("@/assets/index/banner.png"),
      logo: require("@/assets/index/logo.png"),
      img1: require("@/assets/index/001.png"),
      img2: require("@/assets/index/002.png"),
      img3: require("@/assets/index/003.png"),
      img5: require("@/assets/index/swiperCardContent1.png"),
      img6: require("@/assets/index/swiperCardContent2.png"),
      img7: require("@/assets/index/swiperCardContent3.png"),
      img8: require("@/assets/index/1.png"),
      img9: require("@/assets/index/2.png"),
      img10: require("@/assets/index/3.png"),
      img11: require("@/assets/index/4.png"),
      hz1: require("@/assets/index/hndx.png"),
      hz2: require("@/assets/index/gxy.png"),
      hz3: require("@/assets/index/cjdx.png"),
      hz4: require("@/assets/index/pdsxy.png"),
      hz5: require("@/assets/index/awx.png"),
      guanggao: require("@/assets/index/guanggao.png"),
      news: require("@/assets/index/news.png"),
      tax1: require("@/assets/index/tax-01.png"),
      tax2: require("@/assets/index/tax-02.png"),
      tax3: require("@/assets/index/tax-03.png"),
      tax4: require("@/assets/index/tax-04.png"),
      svg1: require("@/assets/index/h.svg"),
      svg2: require("@/assets/index/g.svg"),
      imgUrl: [
        'index/carousel-01.png',
        'index/carousel-02.png',
        'index/carousel-03.png',
        'index/carousel-04.png'
      ],
      newsData:[],
      newsData2: [],
      newsData3: [],
      newsData4: []
    };
  },
  computed: {
  },
  methods: {
    openWeb(val) {
      window.open("/enterprise" + val)
    },
    getData() {
      this.$API
        .post("/article/query", {
          page: {
            pageSize: 7,
            pageNumber: 1,
            totalSize: 100
          },
          categorys: ["公司动态"],
          state: 2
        })
        .then(res => {
          this.newsData = res.list;
          res.list.forEach(function(item) {
            var date = new Date(item.createTime);
            item.createTime =
              // date.getFullYear() +
              // "-" +
              (date.getMonth()<9?'0'+(date.getMonth()+1): (date.getMonth()+1)) +
              "-" +
              date.getDate();
          });

          // this.newsData = res.list.map(item => {
          //   var Time = new Date(item.createTime);
          //   var yue = Time.getMonth() + 1;
          //   var ri = Time.getDate();
          //   Time = yue + '-' + ri;
          //   console.log(Time);
          //   return item;
          // });
          
        });
      this.$API
        .post("/article/query", {
          page: {
            pageSize: 7,
            pageNumber: 1,
            totalSize: 100
          },
          categorys: ["财经要闻"],
          state: 2
        })
        .then(res => {
          this.newsData2 = res.list;
          res.list.forEach(function(item) {
            var date = new Date(item.createTime);
            item.createTime =
              // date.getFullYear() +
              // "-" +
              (date.getMonth()<9?'0'+(date.getMonth()+1): (date.getMonth()+1)) +
              "-" +
              date.getDate();
          });
        });
      this.$API
        .post("/article/query", {
          page: {
            pageSize: 7,
            pageNumber: 1,
            totalSize: 100
          },
          categorys: ["税务要闻"],
          state: 2
        })
        .then(res => {
          this.newsData3 = res.list;
          res.list.forEach(function(item) {
            var date = new Date(item.createTime);
            item.createTime =
              // date.getFullYear() +
              // "-" +
              (date.getMonth()<9?'0'+(date.getMonth()+1): (date.getMonth()+1)) +
              "-" +
              date.getDate();
          });
        });
      this.$API
        .post("/article/query", {
          page: {
            pageSize: 7,
            pageNumber: 1,
            totalSize: 100
          },
          categorys: ["地方资讯"],
          state: 2
        })
        .then(res => {
          this.newsData4 = res.list;
          res.list.forEach(function(item) {
            var date = new Date(item.createTime);
            item.createTime =
              // date.getFullYear() +
              // "-" +
              (date.getMonth()<9?'0'+(date.getMonth()+1): (date.getMonth()+1)) +
              "-" +
              date.getDate();
          });
        });
      // this.$API
      //   .get("/article", {
      //     params: {
      //       pageNumber: 1,
      //       pageSize: 7,
      //       state: 2,
      //       category2: 'swyw'
      //     }
      //   })
      //   .then(res => {
      //     this.newsData4 = res.list;
      //   });
    }
  },
  created() {
    this.getData()
  },
  mounted() {}
};
</script>

<style lang="less" scoped>
@c1: #2a315b;
@c2: #4b61f0;
@c3: #dedede;
@c4: #f1f2f7;
@c5: #2B89F3;


.banner {
  height: 680px;
  .img {
    height: 100%;
    background-position: center top;
  }
}
.sectionTop {
  background-color: @c4;
  height: 600px;
  .content {
    max-width: @wid;
    .mCenter;
    .center;
    margin-top: 50px;
    > .iconItem {
      height: 220px;
      vertical-align: top;
      overflow: hidden;
      span {
        .inline;
        .center;
        transition: all .3s ease;
        p {
          .lh(30px);
          .size(15px);
          letter-spacing: 1px;
          &:nth-of-type(1) {
            .lh(40px);
            .size(20px);
            font-weight: bold;
            letter-spacing: 2px;
          }
        }
        .btn {
          color: #4b61f0;
          font-weight: bold;
          transition: all .3s ease;
          border: 1px solid #4b61f0;
          margin-top: 30px;
          &:hover {
            color: @white;
            background-color: #4b61f0;
          }
        }
      }
      &:hover {
        span {
          margin-top: -104px;
        }
      }
    }
  }
}
.btn {
  width: 120px;
  height: 38px;
  .mCenter;
  .lh(38px);
  color: @c2;
  border: 1px solid @c2;
  background-color: transparent;
  transition: all .3s ease;
  .radius(4px);
  .pointer;
  margin-top: 10px;
  &:hover {
    color: @white;
    background-color: @c2;
  }
}
.iconItem {
  display: inline-block;
  width: 25%;
  margin-bottom: 2em;
  span {
    .inline;
    width: 60%;
    .mCenter;
     &:hover {
      i {
        transform: rotateY(360deg);
        }
    }
  }
  i {
    .inline;
    .size(38px);
    .lh(36px);
    color: @white;
    padding: 20px;
    .radius(50%);
    transition: all 1.8s ease;
    background: linear-gradient(139deg, #f56861 18%, #e3342b 82%);
  }
  p {
    .size(13px);
    .lh(22px);
    &:nth-of-type(1) {
      margin-top: 16px;
      letter-spacing: 2px;
      color: @c2;
      .size(18px);
      .lh(40px);
    }
  }
  &:nth-of-type(2) {
    i {
      background: linear-gradient(130deg, #FE7CD7 18%, #BB19F6 88%);
    }
  }
  &:nth-of-type(3) {
    i {
      background: linear-gradient(130deg, #fc8e54 28%, #fc651d 77%);
    }
  }
  &:nth-of-type(4) {
    i {
      background: linear-gradient(130deg, #62F6BB 11%,#05FE58 82%);
    }
  }
  &:nth-of-type(5) {
    i {
      background: linear-gradient(130deg, #fbde75 36%, #f5c937 71%);
    }
  }
  &:nth-of-type(6) {
    i {
      background: linear-gradient(130deg, #ffd18a 36%, #f99b18 71%);
    }
  }
  &:nth-of-type(7) {
    i {
      background: linear-gradient(130deg, #77a5f5 36%, #2483f4 71%);
    }
  }
  &:nth-of-type(8) {
    i {
        background: linear-gradient(130deg, #fb6a89 36%, #eb355e 71%);
      }
  }
}
.sectionMiddle {
  .contentTop {
    height: 800px;
    position: relative;
    overflow: hidden;
    background-position: top content;
    background: linear-gradient(-20deg, #2F87EC 40%, #53A1F7 65%);
    .sectionTitle {
      span {
        color: @white;
        border-bottom-color: @white;
      }
    }
    .core {
      width: @wid;
      height: 530px;
      .mCenter;
      .center;
      .btn {
        color: @white;
        .border(@white);
        &:hover {
          .border(@white);
          color: #2f87ec;
          background-color: @white;
        }
      }
      .item {
        width: 33.33%;
        display: inline-block;
        margin: 2em 0;
        margin-bottom: 70px;
        color: @white;
        &:hover {
          img {
            animation: tada 1s ease;
          } 
        }
        img {
          margin-bottom: 26px;
        }
        p {
          .lh(28px);
          &:nth-of-type(1) {
            .size(26px);
            padding-bottom: 16px;
          }
        }
      }
    }
  }
}
.wave1, .wave2 {
  left: 0px;
  width: 2000%;
  bottom: -490px;
  position: absolute;
  background-repeat: repeat;
}
.wave1 {
  height: 100px;
  z-index: 9;
  opacity: .3;
  animation: g 160s linear infinite;
}
.wave2 {
  height: 75px;
  z-index: 68;
  opacity: .4;
  animation: h 140s linear infinite;
}
.contentBottom {
  overflow: hidden;
  background-color: @c4;
  padding-bottom: 70px;
  background-position-x: 74%;
  background-position-y: 10%;
  .sectionTitle {
    position: relative;
  }
  .sectionContenr {
    width: @wid;
    margin: 48px auto;
    .center;
    .iconItem {
      width: 25%;
      .name {
        color: @white;
        p:nth-of-type(1) {
          color: @white;
        }
      }
      p {
        .size(16px);
        .lh(28px);
      }
      
    }
  }
}
.viceBanner {
  width: 100%;
  height: 598px;
  margin-top: 3em;
  background-repeat: no-repeat;
  .sectionTitle {
    .lh(10px);
    span {
      color: @white;
      border-bottom: 4px solid @white;
    }
  }
}
.cooperation {
  background-color: @c4;
  .cooperationImg {
    width: @wid;
    .show;
    .mCenter;
    margin-bottom: 6em;
    img {
      margin: 0 39px;
      transition: all .4s ease;
      filter: grayscale(100%);
      opacity: 0.66;
      &:hover {
        filter: none;
        opacity: 1;
      }
    }
  }
}
.swiperCardContent {
  background-color: @c1;
  padding-top: 70px;
  .sectionTitle {
    padding: 1em 0;
    span {
      color: @white;
      border-bottom: 4px solid @white;
    }
  }
  .el-carousel {
    width: @wid;
    .mCenter;
    padding-bottom: 3em;
  }
}
.sectionTitle {
  width: 100%;
  padding: 2em 0;
  .size(30px);
  .center;
  .lh(60px);
  span {
    padding: 8px 12px;
    border-bottom: 4px solid @c5;
  }
}
.lawContent {
  .mCenter;
  width: @wid;
  height: 310px;
  display: flex;
  margin-bottom: 180px;
  position: relative;
  justify-content: space-between;
  
  .lists {
    .center;
    width: 250px;
    transition: .38s;
    padding-top: 18px;
    background-color: @white;
    // margin-right: calc(~"(12% / 3)");
    &:nth-last-child(1) {
      margin: 0;
    }
    p {
      .lh(26px);
      &:nth-of-type(1) {
        .lh(40px);
        .size(18px);
        color: @c2;
        letter-spacing: 1px;
      }
    }
    .btn {
      margin-top: 16px;
    }
    &:hover {
      transform: translateY(-12px);
      box-shadow: 0 15px 30px rgba(0,0,0,.1);
    }
  }
}
.newContent {
  max-width: @wid;
  .mCenter;
  height: 300px;
  .list-1, .list-2, .list-3 {
    .inline;
    height: 100%;
    vertical-align: top;
  }
  .list-1 {
    width: 20%;
    .tab {
      width: 100%;
      height: 50px;
      margin-top: 10px;
      user-select: none;
      transition: all .3s ease;
      .size(21px);
      .lh(50px);
      .center;
      .pointer;
      color: @white;
      background-color: #526bb7;
      &:nth-of-type(1) {
        margin-top: 70px;
      }
      &.hover {
      width: 230px;
      background-color: #d8a157;
      box-shadow: 0 0 4px 1px rgba(0,0,0,0.34);
      transform: translateX(-10px);
      }
    }
    
  }
  .list-2 {
    width: 50%;
    background-color: @white;
    padding: 16px;
    .newsTitle {
      position: relative;
      width: 100%;
      .size(19px);
      padding-bottom: 8px;
      margin-bottom: 12px;
      border-bottom: 1px dotted @c5;
      font {
        position: absolute;
        .pointer;
        .size(17px);
        right: 5px;
        color: #ca9247;
        &:hover {
          color: #f3af52;
        }
      }
    }
    .newsContent {
      width: 100%;
      margin: 8px 0;
      p {
        .inline;
        &:nth-of-type(1) {
          width: 89%;
          margin-right: 2%;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
          .pointer;
          &:hover {
            color: @c5;
          }
          span {
            padding-right: 8px;
          }
        }
        &:nth-of-type(2) {
          width: 9%;
          transform:translateY(-4px);
        }
      }
    }
  }
  .list-3 {
    width: 30%;
    background-size: 100% 100%;
  }
}
</style>